<template>
  <div class="footer-wrapper">
    <div>
      <i class="iconfont reco-document" style="margin-right: 0.5rem;"></i>
      <a target="blank" href="https://vuepress.vuejs.org/">{{
        `generated in vuepress@${vuepressVersion}`
      }}</a>
    </div>
    <span>
      <i class="iconfont reco-theme"></i>
      <a target="blank" href="https://vuepress-theme-reco.recoluan.com">{{
        `theme by vuepress-theme-reco@${version}`
      }}</a>
    </span>
    <span v-if="$themeConfig.record">
      <i class="iconfont reco-beian"></i>
      <a :href="$themeConfig.recordLink || '#'">{{ $themeConfig.record }}</a>
    </span>
    <span>
      <i class="iconfont reco-copyright"></i>
      <a href="#">
        <span v-if="$themeConfig.author || $site.title">{{
          `Copyright &copy; ${$themeConfig.author || $site.title}`
        }}</span>
        &nbsp;&nbsp;
        <span
          v-if="
            $themeConfig.startYear &&
              $themeConfig.startYear != new Date().getFullYear()
          "
          >{{ $themeConfig.startYear }} -
        </span>
        {{ new Date().getFullYear() }}
      </a>
    </span>
    <span v-show="showAccessNumber">
      <i class="iconfont reco-eye"></i>
      <AccessNumber idVal="/" />
    </span>
    <p class="cyber-security" v-if="$themeConfig.cyberSecurityRecord">
      <img
        src="https://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png"
        alt=""
      />
      <a :href="$themeConfig.cyberSecurityLink || '#'">{{
        $themeConfig.cyberSecurityRecord
      }}</a>
    </p>
    <Comments :isShowComments="false" />
  </div>
</template>

<script>
import { version } from '../package.json';
import { version as vuepressVersion } from '@@/node_modules/@vuepress/core/package.json';
export default {
  data() {
    return {
      version,
      vuepressVersion,
    };
  },
  computed: {
    showAccessNumber() {
      const {
        $themeConfig: { valineConfig },
        $themeLocaleConfig: { valineConfig: valineLocalConfig },
      } = this;

      const vc = valineLocalConfig || valineConfig;
      if (vc && vc.visitor != false) {
        return true;
      }
      return false;
    },
  },
};
</script>

<style lang="stylus" scoped>
  .footer-wrapper {
    padding: 1.5rem 2.5rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
    color: lighten($textColor, 25%);
    a {
      font-size 14px
    }
    > span {
      margin-left 1rem
      > i {
        margin-right .5rem
      }
    }
    .cyber-security {
      img {
        margin-right .5rem
        width 20px
        height 20px
        vertical-align middle
      }
      a {
        vertical-align middle
      }
    }
  }

@media (max-width: $MQMobile) {
  .footer {
    text-align: left!important;
    > span {
      display block
      margin-left 0
      line-height 2rem
    }
  }
}
</style>
